<!-- myapp/templates/home.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的Django网页</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/static/bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body{
            background-color: rgb(224, 227, 228);
        }
        .row{
            color: black;
            width: 100%;
            height: 250px;
            background-color: rgb(246, 249, 251);
            padding: 0;
        }
        .col-md-8 a {
            color: black;
        }
        .col-md-8 li {
            margin-bottom: 20px; /* 调整这个值来改变间隙大小 */
        }

        .block  h1{
            text-align: center;
            background-color: rgb(2, 53, 136);
            color: white;
            width: 100%;
            height: 50px;
        }
        .index-about-us {
            background: #f4f7f8;
            height: 300px;
        }

        .index-about-us-intro {
            margin-top: 20px;
            margin-left: 20px;
            color: #0b0b0b;
        }

        .index-about-us-intro p::before {
            content: "•"; /* 使用黑点作为列表项标记 */
            margin-right: 5px; /* 调整黑点与文本之间的距离 */
        }
        .timeline{
            text-align: center
        }
        .timeline-box h1{
            text-align: center;
            background-color: rgb(2, 53, 136);
            color: white;
            width: 100%;
            height: 50px;
        }


        .timeline ul li {
            display: inline-block;
            width: 240px;
            padding: 20px;
            margin-right: 30px;
            color: #151414;
            vertical-align: top;
            border: 5px solid #013b6abc;}

        .timeline ul li h3 {
            color: #000000;
            font-size: 22px;
            text-align: center;
            margin: 10px;}

        .footer {
            text-align: center;
            padding: 1rem 0;
            bottom: 0;
            background-color: rgb(56, 54, 54);
            color: white;
            width: 100%; /* 设置宽度为50% */
        }
    </style>

</head>
<body>
    <div class="container">
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
        <span class="fs-4" >欢迎{{ username }}</span>
      </a>
      <ul class="nav nav-pills">
        <li class="nav-item"><a class="nav-link active" aria-current="page">主页</a></li>
        <li class="nav-item"><a href="{% url 'joingame' %}" class="nav-link">队伍报名</a></li>
        <li class="nav-item"><a href="{% url 'bookgame' %}" class="nav-link">比赛预约</a></li>
        <li class="nav-item"><a href="{% url 'signgame' %}" class="nav-link">比赛签到</a></li>
          <li class="nav-item"><a href="{% url 'losegame' %}" class="nav-link">队伍弃赛</a></li>
          <li class="nav-item"><a href="{% url 'infogame' %}" class="nav-link">比赛通知</a> </li>

      </ul>
    </header>
  </div>
    <main class="container mt-4">

      <div class="welcome">
        <div class="row">
            <div class="col-md-8">
                <ul>
                  <h1>新闻公告</h1>
                 <li>
                    <a href="news/001/">企业数字化运营挑战赛规则修改一览表</a>
                 </li>
                  <li>
                   <a href="news/002/">企业数字化运营挑战赛正式启动</a>
                 </li>
                  <li>
                   <a href="news/003/">企业数字化运营挑战赛半决赛成功举行</a>
                  </li>
                  <li>
                   <a href="news/004/">企业数字化运营挑战赛总决赛圆满举行</a>
                    </li>
                 </ul>
            </div>
      </div>

      </div>

      <div class="index-about-us">
        <div class="block clearfix">
          <h1>大赛简介</h1>
            <div class="f_l index-about-us-intro">

                <div>
                  <h3>赛事背景</h3>
                    <p>
                      随着数字经济的快速发展，企业数字化运营已成为提高效率、优化客户体验和实现精准决策的关键战略工具。
                    </p>
                    <p>
                      中央财经大学通过举办此类挑战赛，不仅响应了国家关于深化产教融合、校企合作的发展战略，而且促进了学生在数字经济领域的专业成长和技能提升
                    </p>
                    <h3>赛事目标</h3>
                    <p>
                        激发学生对数字经济的学习兴趣，培养其数据洞察力、分析能力及团队协作精神。
                    </p>
                    <p>
                      通过模拟真实的企业运营环境，让学生在实践中掌握数字化运营的核心技能。
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="timeline-box">
      <h1>大赛时间表</h1>
      <div class="block">
          <div class="timeline">
              <ul>
                  <li>
                      <h3>报名注册</h3>
                      <p>时间：2024年9月27日-2024年12月31日</p>
                      <p>各参赛团队须在规定时间内进行报名注册，并按要求上传相关信息。校赛开始之日后注册信息不再修改</p>
                  </li>
                  <li>
                      <h3>初级选拔赛</h3>
                      <p>时间：2025年3月1日-2025年4月15日

                      </p>
                      <p>各注册团队在规定时间内组织进行初级选拔赛。</p>
                  </li>

                  <li>
                      <h3>半决赛</h3>
                      <p>时间：2023年4月20日-2023年5月20日</p>
                      <p>
                          由各团队在规定时间内组织进行。
                      </p>
                  </li>

                  <li>
                      <h3>总决赛

                      </h3>
                      <p>时间：2023年5月20日-22日</p>
                      <p>地点：详见比赛前具体通知</p>
                  </li>
              </ul>
          </div>
      </div>
  </div>


    </main>

    <div class="banner">
      <img src="/static/images/welcome01.jpg" alt="">
     </div>

    <div class="footer">
          <p>联系地址：中央财经大学信息学院7号楼</p>
            <p>联系邮箱：qiyeyunying@xjtu.edu.cn  &nbsp;&nbsp; 联系电话：029-82656919-801
          </p>
    </div>

    <footer class="bg-dark text-white text-center py-3">
        <p>&copy; 2024 我的Django网页 - 版权所有</p>
    </footer>

    <!-- 引入Bootstrap和jQuery JS -->

</body>
</html>
